<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <jsp:include page="../header.jsp"></jsp:include>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">XX设备</h1>
</header>
<div class="mui-content">
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="color:#333">
        <li class="mui-table-view-cell">
            <span style="float:left">设备号码</span>
            <span style="float:right" id="productId">${info.id}</span></li>
        <li class="mui-table-view-cell">
            <span style="float:left">水机状态</span>
            <span style="float:right" id="state">${info.devStatus}</span></li>
        <li class="mui-table-view-cell">
            <span style="float:left">原水TDS</span>
            <span style="float:right" id="rawtds">${info.rawTds}</span>
        </li>
        <li class="mui-table-view-cell">
            <span style="float:left">净水TDS</span>
            <span style="float:right" id="puritytds">${info.purityTds}</span>
        </li>
        <li class="mui-table-view-cell">
            <span style="float:left">安装时间</span>
            <span style="float:right" id="productdate">
                <fmt:formatDate value="${info.createTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
            </span>
        </li>
        <li class="mui-table-view-cell">
            <span style="float:left">已用流量</span>
            <span style="float:right" id="userdflow">${info.usedFlow}</span>
        </li>
        <li class="mui-table-view-cell">
            <span style="float:left">已用时长</span>
            <span style="float:right" id="usedtime">${info.usedTime}</span>
        </li>
        <li class="mui-table-view-cell">
            <span style="float:left">剩余流量</span>
            <span style="float:right" id="leftflow">${info.remainFlow}</span>
        </li>
        <li class="mui-table-view-cell">
            <span style="float:left">剩余时长</span>
            <span style="float:right" id="lefttime">${info.remainTime}</span>
        </li>
    </ul>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-loop"></span>
        <span class="mui-tab-label">开机</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-close"></span>
        <span class="mui-tab-label">关机</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-arrowthindown"></span>
        <span class="mui-tab-label">强冲</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-plus"></span>
        <span class="mui-tab-label">充值1升</span>
    </a>
</nav>
</body>
<jsp:include page="../footer.jsp"></jsp:include>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
</script>
</html>